<template>
  <div class="membership-container">
    <div class="free-tip">
      <a-alert
        message="Tips: 本站完全免费，不必充值"
        type="info"
        show-icon
        banner
      />
    </div>
    <div class="membership-header">
      <h2>开通会员</h2>
      <p class="subtitle">解锁全部高级功能，加速你的技术成长</p>
    </div>

    <!-- 会员权益展示 -->
    <div class="vip-benefits">
      <h3>会员权益</h3>
      <div class="benefits-grid">
        <div class="benefit-item">
          <a-icon type="robot" theme="filled" />
          <h4>AI助手无限对话</h4>
          <p>智能问答不限次数，快速解决技术难题</p>
        </div>
        <div class="benefit-item">
          <a-icon type="solution" theme="filled" />
          <h4>面试题详细解析</h4>
          <p>独家面试题库，助你一击即中</p>
        </div>
        <div class="benefit-item">
          <a-icon type="thunderbolt" theme="filled" />
          <h4>专属模拟面试</h4>
          <p>AI面试官1v1指导，提升面试技巧</p>
        </div>
        <div class="benefit-item">
          <a-icon type="crown" theme="filled" />
          <h4>VIP专属标识</h4>
          <p>彰显你的身份，提升社区影响力</p>
        </div>
      </div>
    </div>

    <!-- 会员套餐选择 -->
    <div class="membership-plans">
      <h3>选择套餐</h3>
      <div class="plans-grid">
        <div class="plan-card" :class="{ active: selectedPlan === 'month' }" @click="selectedPlan = 'month'">
          <div class="plan-header">
            <h4>月度会员</h4>
            <div class="price">
              <span class="currency">￥</span>
              <span class="amount">29.9</span>
              <span class="unit">/月</span>
            </div>
          </div>
          <div class="plan-features">
            <p><a-icon type="check" />无限AI对话</p>
            <p><a-icon type="check" />题目解析</p>
            <p><a-icon type="check" />模拟面试</p>
          </div>
          <a-button type="primary" block @click.stop="handlePurchase('month')">
            立即开通
          </a-button>
        </div>

        <div class="plan-card" :class="{ active: selectedPlan === 'quarter' }" @click="selectedPlan = 'quarter'">
          <div class="plan-header">
            <h4>季度会员</h4>
            <div class="price">
              <span class="currency">￥</span>
              <span class="amount">79.9</span>
              <span class="unit">/季</span>
            </div>
            <div class="saving-tag">省20元</div>
          </div>
          <div class="plan-features">
            <p><a-icon type="check" />无限AI对话</p>
            <p><a-icon type="check" />题目解析</p>
            <p><a-icon type="check" />模拟面试</p>
            <p><a-icon type="check" />专属客服</p>
          </div>
          <a-button type="primary" block @click.stop="handlePurchase('quarter')">
            立即开通
          </a-button>
        </div>

        <div class="plan-card recommended" :class="{ active: selectedPlan === 'year' }" @click="selectedPlan = 'year'">
          <div class="recommend-tag">推荐</div>
          <div class="plan-header">
            <h4>年度会员</h4>
            <div class="price">
              <span class="currency">￥</span>
              <span class="amount">299</span>
              <span class="unit">/年</span>
            </div>
            <div class="saving-tag">省60元</div>
          </div>
          <div class="plan-features">
            <p><a-icon type="check" />无限AI对话</p>
            <p><a-icon type="check" />题目解析</p>
            <p><a-icon type="check" />模拟面试</p>
            <p><a-icon type="check" />专属客服</p>
            <p><a-icon type="check" />年度大会员徽章</p>
          </div>
          <a-button type="primary" block @click.stop="handlePurchase('year')">
            立即开通
          </a-button>
        </div>
      </div>
    </div>

    <!-- 支付弹窗 -->
    <a-modal
      v-model="paymentVisible"
      title="选择支付方式"
      :footer="null"
      @cancel="handlePaymentCancel"
    >
      <div class="payment-content">
        <div class="order-info">
          <p class="order-title">订单信息</p>
          <p class="order-detail">
            <span>{{ getOrderTitle }}</span>
            <span class="order-price">￥{{ getOrderPrice }}</span>
          </p>
        </div>
        <div class="payment-methods">
          <div class="method-item" :class="{ active: payMethod === 'alipay' }" @click="payMethod = 'alipay'">
            <a-icon type="alipay-circle" class="payment-icon alipay" />
            <span>支付宝</span>
          </div>
          <div class="method-item" :class="{ active: payMethod === 'wechat' }" @click="payMethod = 'wechat'">
            <a-icon type="wechat" class="payment-icon wechat" />
            <span>微信支付</span>
          </div>
        </div>
        <a-button type="primary" block size="large" :loading="paying" @click="handlePayment">
          确认支付
        </a-button>
      </div>
    </a-modal>
  </div>
</template>

<script>
export default {
  name: 'Membership',
  data() {
    return {
      selectedPlan: 'month',
      paymentVisible: false,
      payMethod: 'alipay',
      paying: false
    }
  },
  computed: {
    getOrderTitle() {
      const titles = {
        month: '月度会员',
        quarter: '季度会员',
        year: '年度会员'
      }
      return titles[this.selectedPlan]
    },
    getOrderPrice() {
      const prices = {
        month: '29.9',
        quarter: '79.9',
        year: '299'
      }
      return prices[this.selectedPlan]
    }
  },
  methods: {
    handlePurchase(type) {
      this.selectedPlan = type
      this.paymentVisible = true
    },
    handlePaymentCancel() {
      this.paymentVisible = false
      this.payMethod = 'alipay'
      this.paying = false
    },
    async handlePayment() {
      this.paying = true
      try {
        // TODO: 调用支付接口
        await new Promise(resolve => setTimeout(resolve, 1500))
        this.$message.success('支付成功')
        this.paymentVisible = false
      } catch (error) {
        this.$message.error('支付失败，请重试')
      } finally {
        this.paying = false
      }
    }
  }
}
</script>

<style scoped>
.membership-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
}

.membership-header {
  text-align: center;
  margin-bottom: 48px;
}

.membership-header h2 {
  font-size: 32px;
  color: #1f2937;
  margin-bottom: 12px;
}

.subtitle {
  font-size: 16px;
  color: #6b7280;
}

/* 会员权益样式 */
.vip-benefits {
  margin-bottom: 48px;
}

.vip-benefits h3 {
  font-size: 24px;
  color: #1f2937;
  margin-bottom: 24px;
  text-align: center;
}

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
  margin-bottom: 40px;
}

.benefit-item {
  background: #fff;
  padding: 24px;
  border-radius: 12px;
  text-align: center;
  transition: all 0.3s ease;
  border: 1px solid #e5e7eb;
}

.benefit-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.05);
}

.benefit-item .anticon {
  font-size: 32px;
  color: #1e80ff;
  margin-bottom: 16px;
}

.benefit-item h4 {
  font-size: 18px;
  color: #1f2937;
  margin-bottom: 8px;
}

.benefit-item p {
  color: #6b7280;
  font-size: 14px;
  line-height: 1.5;
}

/* 会员套餐样式 */
.membership-plans h3 {
  font-size: 24px;
  color: #1f2937;
  margin-bottom: 24px;
  text-align: center;
}

.plans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}

.plan-card {
  background: #fff;
  border-radius: 12px;
  padding: 32px;
  border: 2px solid #e5e7eb;
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
}

.plan-card.active {
  border-color: #1e80ff;
}

.plan-card.recommended {
  border-color: #1e80ff;
  transform: scale(1.02);
}

.recommend-tag {
  position: absolute;
  top: -12px;
  right: 24px;
  background: #1e80ff;
  color: #fff;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
}

.plan-header {
  text-align: center;
  margin-bottom: 24px;
  position: relative;
}

.plan-header h4 {
  font-size: 20px;
  color: #1f2937;
  margin-bottom: 16px;
}

.price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  color: #1e80ff;
}

.currency {
  font-size: 20px;
  margin-right: 4px;
}

.amount {
  font-size: 36px;
  font-weight: bold;
}

.unit {
  font-size: 14px;
  color: #6b7280;
  margin-left: 4px;
}

.saving-tag {
  position: absolute;
  top: 0;
  right: 0;
  background: #fff2e8;
  color: #fa8c16;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.plan-features {
  margin: 24px 0;
}

.plan-features p {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  color: #4b5563;
}

.plan-features .anticon {
  color: #1e80ff;
  margin-right: 8px;
}

/* 支付弹窗样式 */
.payment-content {
  padding: 20px 0;
}

.order-info {
  background: #f9fafb;
  padding: 16px;
  border-radius: 8px;
  margin-bottom: 24px;
}

.order-title {
  font-size: 14px;
  color: #6b7280;
  margin-bottom: 8px;
}

.order-detail {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #1f2937;
}

.order-price {
  font-size: 20px;
  color: #1e80ff;
  font-weight: bold;
}

.payment-methods {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.method-item {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.method-item.active {
  border-color: #1e80ff;
  background: #f0f7ff;
}

.payment-icon {
  font-size: 24px;
}

.payment-icon.alipay {
  color: #1677FF;
}

.payment-icon.wechat {
  color: #07C160;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .membership-container {
    padding: 20px;
  }

  .membership-header h2 {
    font-size: 24px;
  }

  .benefits-grid {
    grid-template-columns: 1fr;
  }

  .plans-grid {
    grid-template-columns: 1fr;
  }

  .plan-card.recommended {
    transform: none;
  }

  .free-tip {
    margin: -20px -20px 20px -20px;
  }
}
</style> 